<template>
  <div class="evaluate">
  <!-- 评价页面头部-->
    <div class="score" style="width: 100%; height: 106px; display: flex;">
      <div class="scoreLeft">
        <div class="left">
          <P class="leftP1">3.9</p>
          <p class="leftP2">综合评分</p>
          <p class="leftP3">高于周边商家63%</p>
        </div>
      </div>
      <div class="scoreRight">
        <div class="right" style="height: 70px; padding: 18px 0px 18px 12px; position: relative;">
          <div style="display: flex; height: 18px;">
            <P class="rightP" style="float: left; margin-right: 12px; flex: 0 0 48px;">服务态度</p>
            <assess1 style="flex: 1;"></assess1>
            <span style="position: absolute; left: 170px;line-height: 18px;">3.9</span>
          </div>
          <div style="display: flex; margin-top:8px; height: 18px;">
            <P class="rightP" style="float: left; margin-right: 12px; flex: 0 0 48px;">服务态度</p>
            <assess1 style="flex: 1;"></assess1>
            <span style="position: absolute; left: 170px;line-height: 18px;">4.5</span>
          </div>
          <div style="display: flex; height: 18px;">
            <p class="rightP" style="margin-top:8px; flex: 0 0 60px;">送达时间</p>
            <span class="rightSpan">44分钟</span>
          </div>
        </div>
      </div>
    </div>
  <!-- 中间的横条-->
    <div style="height: 18px; background: rgba(147, 153, 159, 0.2);">
    </div>
  <!-- 评价页面尾部-->
    <div class="tail">
      <div>
        <div>
          <p class="tailP">全部</p>
          <ul style="display: inline-block; margin: 0; padding: 0;">
            <li class="tailLi" style="background: rgba(0,160,220,0.3);">
              满意
            </li>
            <li class="tailLi" style="background: rgb(226, 226, 226);">
              不满意
            </li>
          </ul>
        </div>
        <div class="tailCenter">
          <i class="iconfont tailIcon" style="display: inline-block;">&#xe63b;</i>
          <P style="display: inline-block;">只看有内容的评价</p>
        </div>
      </div>
      <div>
      <!-- 用户信息-->
        <div style="height: 34px; overflow: hidden; margin: 18px 12px 0px 18px;">
          <img class="imgs" src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=80ccf98ffe18dbfc4436a9f7cdd2eb18&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2F0d338744ebf81a4c304a0456d92a6059252da631.jpg" />
          <div style="position: relative;
    left: 12px; top: 2px;">
            <p style="font-size: 10px; color: rgb(7,17,27); line-height: 12px;">风化的石头</p>
            <div style="height: 12px; line-height: 12px; margin-top: 4px; display: flex;">
              <assess1 style="flex: 0 0 100px ;"></assess1>
              <p style="flex: 1; font-size: 10px; font-weight: 200; color: rgb(147,153,159); line-height: 16px;">20分钟送达</p>
            </div>
          </div>
        </div>
      <!-- 用户评价内容-->
        <div style="margin: 6px 18px 0 62px;">
          <span style="color: rgb(7,17,27); line-height: 18px;">送的很慢，菜也不怎么好吃，饭太少</span>
          <div style="margin: 8px 0px;">
            <i class="iconfont" style="font-size: 12px; color: rgb(0,160,220); line-height: 16px; float: left;     margin-right: 8px;">&#xe60c;</i>
            <p style="    width: 39px;
    height: 16px;
    overflow: hidden;
    border: 1px solid;
    border-width: 1px;
    border-color: rgba(7, 17, 27, 0.1);
    border-radius: 2px;
    background-color: rgb(255, 255, 255);
    font-size: 9px;
    color: rgb(147, 152, 159);
    line-height: 16px; margin-left: 12px; text-align: center;">酸辣鸡杂</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import assess1 from '@/components/assess1'
export default {
  name: 'evaluate',
  components: {
    assess1
  }
}
</script>

<style scoped>
.scoreLeft{
  width: 37%;
}
.left {
  text-align: center;
  margin: 18px 0px;
  height: 70px;
  border-right: 1px solid rgba(7,17,27,0.1);
}
.scoreRight{
  width: 63%;
}
p{
  margin: 0px;
  padding: 0px;
}
.leftP1{
  font-size: 24px;
  color: rgb(255,153,0);
  line-height: 28px;
}
.leftP2 {
  font-size: 12px;
  color: rgb(7,17,27);
  line-height: 12px;
  margin-top: 6px;
}
.leftP3 {
  font-size: 10px;
  color: rgba(7,17,27,0.4);
  line-height: 10px;
  margin-top: 8px;
}
.rightP{
  font-size: 12px;
  color: rgb(7,17,27);
  line-height: 18px;
}
.rightSpan{
  margin-top:8px;
  flex: 1;
  font-size: 12px;
  color: rgb(147, 153, 159);
  line-height: 18px;
}
span{
  font-size: 12px;
  color: rgb(255,153,0);
}
.tailP{
  display: inline-block;
  line-height: 34px;
  height: 34px;
  min-width: 60px;
  text-align: center;
  background: rgb(0,160,220);
  margin: 18px 0px 18px 18px;
  padding: 3px 5px;
  color: #fff;
}
.tailLi{
  display: inline-block;
  line-height: 34px;
  height: 34px;
  min-width: 60px;
  text-align: center;
  margin-left: 12px;
  padding: 3px 5px;
}
.tailCenter{
  height: 50px;
  line-height: 50px;
  display: block;
  padding-left: 18px;
  border-top: 1px solid rgba(147, 153, 159, 0.1);
  border-bottom: 1px solid rgba(147, 153, 159, 0.1);
  font-size: 14px;
  color: rgba(7,17,27,0.4);
  font-weight: 700;
}
.imgs{
  width: 32px;
  height: 32px;
  border-radius: 32px;
  float: left;
}
</style>
